<template>
    <div class="pie-container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">建档情况</div>
            <div class="nav-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">数据统计</div>
            <div class="nav-item" :class="{ active: activeTab === 2 }" @click="changeTab(2)">建档详情</div>
        </div>

        <div class="pie-content">
            <div class="chart-item">
                <div class="documentation">
                    <p class="title">建档人群</p>
                    <p class="number">645</p>
                </div>
                <div class="documentation">
                    <p class="title">健康档案</p>
                    <p class="number">248</p>
                </div>
                <div class="documentation">
                    <p class="title">平均值</p>
                    <p class="number">567</p>
                </div>
                <div class="documentation">
                    <p class="title">全部人数</p>
                    <p class="number">7690</p>
                </div>
            </div>
            <p class="percent">70%</p>
            <div ref="pieChart" class="pie-chart"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const activeTab = ref(1); // 当前激活的标签索引
const pieChart = ref(null); // 图表实例

// 切换标签方法
const changeTab = (index: number) => {
    activeTab.value = index;
};

onMounted(() => {
    const myChart = echarts.init(pieChart.value);

    const option = {
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                startAngle: 300,
                endAngle: 360,
                label: {
                    show: true
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: [
                    {
                        value: 14.54,
                        name: '14.54%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 255, 153, 0.6)' }, // 更亮的黄色 + 透明度
                                { offset: 1, color: 'rgba(255, 204, 0, 0.6)' }  // 更深的金色 + 透明度
                            ])
                        }
                    },
                    {
                        value: 31.95,
                        name: '31.95%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 102, 102, 0.6)' }, // 更浅的红色 + 透明度
                                { offset: 1, color: 'rgba(255, 0, 0, 0.6)' }      // 更深的红色 + 透明度
                            ])
                        }
                    },
                    {
                        value: 53.51,
                        name: '70%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(102, 153, 255, 0.6)' }, // 更浅的蓝色 + 透明度
                                { offset: 1, color: 'rgba(0, 0, 153, 0.6)' }      // 更深的蓝色 + 透明度
                            ])
                        }
                    }
                ],
                markLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)'
                    },
                    label: {
                        show: true,
                        position: 'end',
                        formatter: (params: any) => {
                            // 获取数据项的颜色
                            const color = params.data.itemStyle.color;
                            return `${params.name}: ${params.value} (${color})`;
                        }
                    },
                    silent: false
                }
            }
        ]
    };

    myChart.setOption(option);
});


</script>

<style scoped>
/* 整体布局 */
.pie-container {
    /* background-color: #031d44; */
    color: #fff;
    padding: 16.2px;
    border-radius: 8.1px;
    width: calc(100% + 8.5vh);
    max-width: calc(480px + 8.5vh);
    margin: 0 auto;
    height: calc(34.15vh);

    /* 顶部导航 */
    .top-nav {
        display: flex;
        margin-bottom: 16.2px;

        .nav-item {
            padding: 7.2px 16.2px;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
            height: 8px;
            width: 56px;
            text-align: center;
            line-height: 8px;
            border: 1.35px solid transparent;
            border-radius: 3.6px;
            transition: all 0.3s ease;
        }

        .nav-item:nth-child(2) {
            margin-left: 80px;
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item:nth-child(3) {
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item.active {
            background-color: rgb(32, 174, 226);
        }
    }

    /* 内容区域 */
    .pie-content {
        display: flex;
        align-items: center;
        position: relative;

        .chart-item {
            width: 200px;
            height: 160px;
            position: absolute;
            top: 60px;
            left: 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .documentation {
                width: 80px;
                height: 70px;
                font-size: 20px;
                font-weight: bolder;
                cursor: pointer;
                display: flex;
                flex-direction: column;

                .title {
                    font-size: 15px;
                }

                .number {
                    font-size: 25px;
                }
            }
        }

        /* 图表区域 */
        .pie-chart {
            width: 486px;
            height: 270px;
            margin-left: -24px;
            transform: rotate(60deg);
            display: flex;
            flex-direction: row-reverse; /* 使图表旋转180度 */
            margin-left: 18vh;
        }

        .percent {
            position: absolute;
            top: 105px;
            left: 290px;
            font-size: 40px;
            font-weight: bolder;
        }
    }
}
</style>